:root{
--lbackground:#ecf0f3;
--lcolor:#D09B6B;
--lbox:18px 18px 30px #d1d9e6, -18px -18px 30px #fff;
--lboxr:inset 18px 18px 30px #d1d9e6, inset -18px -18px 30px #fff;
}/* Dark mode */
@media (prefers-color-scheme: dark) {
        
}
@media (prefers-color-scheme: light) {
        
}
*{
    text-align:center;
	padding: 0px;
	margin: 0px;
}
body,html{
	width: 100%;
	background-color: var(--lbackground);
}

.card{	
	min-height: 430px;
	background-color: var(--lbackground);
	border-radius: 10px;
	box-shadow: var(--lbox);
   /*
    -2px -2px 2px rgba(255,255,255,1),
	-2px -2px 12px rgba(255,255,255,0.5),
	inset 2px 2px 4px rgba(255,255,255,0.1),
	2px 2px 8px rgba(0,0,0,0.15);
   */
	transition: 2s;
}
.name{
	font-size: 20px;
	font-weight: bold;
	margin: 0px;
}
.qm{
    /*首行缩进*/
    align-content:20px;
    padding-left:20px;
    padding-right:20px;
}
.row{
    margin:20px;
    margin-bottom:50px;
    display:flex;
    justify-content:center;
    flex-wrap:wrap;
}
.col{
    padding:5px;
    margin:10px;
}
.col a{
    display:flex;
    flex-direction:column;
    justify-content:center;
    text-align:center;
    /*去除下划线*/
	text-decoration: none;
    color:var(--lcolor);
}
.icon{
	height: 40px;
	width: 40px;
	padding: 10px;
	border-radius: 100px;
	box-shadow: var(--lbox);
   /*
    -2px -2px 2px rgba(255,255,255,1),
	-2px -2px 12px rgba(255,255,255,0.5),
	inset 2px 2px 4px rgba(255,255,255,0.1),
	2px 2px 8px rgba(0,0,0,0.15)
   */
}
a:hover .icon{
	height: 50px;
	width: 50px;
	box-shadow:var(--lboxr);
   /*
    inset -2px -2px 2px rgba(255,255,255,1),
	inset -2px -2px 12px rgba(255,255,255,0.5),
	inset 2px 2px 4px rgba(255,255,255,0.1),
	inset 2px 2px 8px rgba(0,0,0,0.15);
   */
	transition: all 200;
}